<template>
	<view>
		<view style="display: flex;justify-content: center">
			<uni-forms ref="form" :modelValue="formData" :rules="rule">
				<uni-forms-item label="账号" name="account">
					<input class="input" type="text" v-model="formData.account" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<input class="input" v-model="formData.password" type="text" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="approvePassword">
					<input class="input" v-model="formData.approvePassword" type="text" placeholder="请再次输入密码" />
				</uni-forms-item>
				<uni-forms-item label="昵称" name="nick_name">
					<input class="input" v-model="formData.nick_name" type="text" placeholder="请输入用户昵称" />
				</uni-forms-item>
				<uni-forms-item label="性别" name="sex">
					<input class="input" v-model="formData.sex" type="text" placeholder="请输入性别" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view style="display: flex;flex-direction: row;justify-content: space-around;">
			<button style="width:40%; background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;" @click="update">确定</button>
			<button style="width:40%; background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;" @click="cancel">取消</button>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					account:"",
					password:"" ,
					approvePassword:"",
					nick_name:"",
					sex:"",
				},
				rule:{}
			}
		},
		
		methods: {
			update(){
				let t=this;
				if(this.formData.password != this.formData.approvePassword){
					uni.showToast({
						title:"两次输入的密码不一致！"
					})
				}
				else{
					uni.request({
						method:"POST",
						url:"http://localhost:3000/updateUserInfo",
						data:JSON.stringify(this.formData),
						dataType:"application/json",
						success(data) {
							uni.showToast({
								title:"修改成功!",
								duration:1000,
								icon:'success',
								success() {
									t.$store.commit("setAccount",t.formData.account);
									t.$store.commit("setNickName",t.formData.nick_name);
									uni.navigateTo({
										url:"/pages/index/mine/mine"
									})
								}
								
							})
							
						}
					})
				}
			},
			cancel(){
				uni.navigateTo({
					url:"/pages/index/mine/mine"
				})
			}
		}
	}
</script>

<style>
.input {
    appearance: none;
    text-align: center;
    height: 36px;
    width: 248px;
    border-radius: 15px;
    border: 0px solid #fff;
    
    outline: 0;
    letter-spacing: 1px;
    color: black;
    font-weight: 600;
    background: rgba(234, 234, 234, 0.1);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
	
}
</style>
